<template>
    <div class="footer">
        <span class="todo-count">共<strong>{{ lastLength }}</strong>条未完成任务</span>
        <ul class="filters">
            <li>
                <a href="#" :class="{ selected: status === 'all' }"
                 @click.prevent="emit('updateStatus', 'all')">全部</a>
            </li>
            <li>
                <a href="#" :class="{ selected: status === 'active' }"
                    @click.prevent="emit('updateStatus', 'active')">未完成</a>
            </li>
            <li>
                <a href="#" :class="{ selected: status === 'completed' }"
                    @click.prevent="emit('updateStatus', 'completed')">已完成</a>
            </li>
        </ul>
    </div>
</template>

<script setup>
const props = defineProps(['lastLength', 'status'])
const emit = defineEmits(['updateStatus'])
</script>

<style scoped></style>